<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/school/front/include/taglib.jsp" %>
<html>
<head>
    <meta name="decorator" content="blank"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <script src="${ctxStatic}/chart/Chart.min.js" type="text/javascript"></script>
    <title>读者借书情况</title>
    <style>
        .div {
            margin-top: 20px;
            width: 33%;
            text-align: center;
            height: 30px;
            font-size: 25px;
        }
    </style>
</head>
<body>
<div>
    <h2 align="left">读者借书情况</h2>
</div>
<div align="center">
    <canvas id="canvas" height="300" width="600"></canvas>
</div>

<script type="text/javascript">

    var labels =[];
    var data =[];
    var total = 0;
    <c:forEach items="${bookborrows}" var="borrow">
    labels.push(${borrow.year}+"-"+${borrow.month});
    labels.push("");
    data.push(${borrow.amount});
    data.push("");

    total +=${borrow.amount};
    </c:forEach>


    var barChartData;
    //设置图形需要显示的数据
    function getSvSchoolInfo() {
        try {
            barChartData = {
                labels: labels,
                datasets: [
                    {
                        fillColor: "rgba(151,187,205,0.5)",
                        strokeColor: "rgba(151,187,205,0.8)",
                        highlightFill: "rgba(151,187,205,0.75)",
                        highlightStroke: "rgba(151,187,205,1)",
                        data: data
                    }
                ]
            };
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive: true
            });
        } catch (e) {
            alert(e)
        }
    }
    window.onload = function () {
        getSvSchoolInfo();

        /*var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive: true
        });*/
        $("#total").html("读者总借书量：" + total);
        $("#readerAmount").html("读者总数：${readerAmount}");
    }

</script>
<div>
    <div id="total" class="div"></div>
    <div id="readerAmount" class="div"></div>
</div>
</body>
</html>